<template>
  <div>
    <!-- 第一部分 -->
    <el-row :gutter="20">
      <!-- 第一部分的 左部分 -->
      <el-col :span="8">
        <!--左部分的第一个卡片 信息展示  -->
        <el-card shadow="hover">
          <!-- 第一行  -->
          <div class="head">
            <img :src="message.img" alt="" />
            <div class="message">
              <div>{{ this.message.Admin }}</div>
              <div class="font_color">超级管理员</div>
            </div>
          </div>
          <!-- 第二行   -->
          <div class="body font_color">
            <div>
              <span>上次登录的时间:</span> <span>{{ this.message.time }}</span>
            </div>
            <div>
              <span>上次登录的地点:</span> <span>{{ this.message.space }}</span>
            </div>
          </div>
        </el-card>

        <!-- 左部分的第二个卡片  语言详情 -->
        <el-card shadow="hover" class="card-2">
          <div slot="header">语言详情</div>
          <div class="language_body">
            <span
              ><span>Vue:</span
              ><el-progress
                type="circle"
                :width="85"
                :percentage="25"
                color="pink"
              ></el-progress
            ></span>
            <span
              ><span class="html">Html:</span
              ><el-progress
                type="circle"
                :width="85"
                :percentage="30"
                color="green"
              ></el-progress
            ></span>
            <span
              ><span>Css:</span
              ><el-progress
                type="circle"
                :width="85"
                :percentage="65"
                color="#3CADC9"
              ></el-progress
            ></span>
            <span
              ><span>JavaScript:</span
              ><el-progress
                type="circle"
                :width="85"
                :percentage="75"
                color="blue"
              ></el-progress
            ></span>
          </div>
        </el-card>
      </el-col>

      <!-- 第一个部分的 右部分-->
      <el-col :span="16">
        <!-- 右部分的 第一行 -->
        <el-row class="no-padding">
          <el-col :span="8" >
            <el-card shadow="hover">
              <div class="system-head">
                <div class="admin"></div>
                <div class="system_number">
                  <div class="admin_color">2156</div>
                  <div>用户访问量</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover">
              <div class="system-head">
                <div class="system"></div>
                <div class="system_number">
                  <div class="system_color">2000</div>
                  <div>系统消息</div>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :span="8">
            <el-card shadow="hover">
              <div class="system-head">
                <div class="number"></div>
                <div class="system_number">
                  <div class="number_color">1000</div>
                  <div>数量</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <!-- 第二行 -->
        <el-row >
                <el-card class="card-2" style='height:480px;'>
                    <div slot="header">待办事项</div>
                    <el-table
                      :data='table'
                      >
                        <!-- 选择 -->
                          <el-table-column
                              align='center'
                              label='是否完成'
                              width="100"
                          >
                            <!-- 使用 v-slot  -->
                               <template v-slot:default='scope1'>
                                  <el-checkbox v-model='scope1.row.status'>
                                  </el-checkbox>
                               </template>
                          </el-table-column>
                         <!-- 日期 -->
                          <el-table-column
                            prop='data'
                            label="日期"
                            align='center'
                            >

                          </el-table-column>
                           <!-- 姓名 -->
                          <el-table-column
                            prop="name"
                            label='姓名'
                            align='center'
                          >
                            
                          </el-table-column>
                             <!-- 内容 -->
                          <el-table-column
                              label='内容'
                              align='center'
                            > 
                              <!-- 作用域插槽 -->
                            <template  v-slot:default='scope'>
                              <div :class="{'outline':scope.row.status}">
                                {{scope.row.content}}
                              </div>
                            </template>
                          </el-table-column>
                    </el-table>
                </el-card>
           </el-row>
      </el-col>
    </el-row>
    <!-- 第二部分 -->
    <el-row :gutter="20">
        <el-col :span='12' style="text-align:center;margin-top:20px">
              <el-card shadow="hover">
                <div id="mychart1" >
                </div>
                </el-card>
        </el-col>
        <el-col :span='12' style="margin-top:20px;text-align:center;">
            <el-card shadow="hover">
                   <div id="mychart2">
              </div>
                </el-card>
          
        </el-col>
    </el-row>
  </div>
</template>

<script>


export default {
  methods: {  
      drawLine1(){
        // 基于准备好的dom，初始化echarts实例
        
        let myChart = this.$echarts.init(document.getElementById('mychart1'))
        // 绘制图表
        myChart.setOption({
         title: {
         text: 'Waterfall Chart',
        subtext: 'Living Expenses in Shenzhen'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    formatter: function (params) {
      var tar = params[1];
      return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    splitLine: { show: false },
    data: ['2021-11-1', '2021-11-2', '2021-11-3', '2021--11-4', '2021-11-5', '2021-11-6','2021-11-7']
  },
  yAxis: {
    type: 'value'
  },
  series: [
      {
      name: 'Placeholder',
      type: 'bar',
      stack: 'Total',
      itemStyle: {
        borderColor: 'transparent',
        color: 'red'
      },
      emphasis: {
        itemStyle: {
          borderColor: 'transparent',
          color: 'transparent'
        }
      },
      data: [0, 1700, 1400, 1200, 300, 0,300]
    },
    {
      name: '访问量',
      type: 'bar',
      stack: 'Total',
      label: {
        show: true,
        position: 'inside'
      },
      data: [2900, 1200, 300, 200, 900, 300,300]
    }
  ]
        })
    },
    drawLine2(){
      // 初始化
        let myChart=this.$echarts.init(document.getElementById('mychart2'))
    // 绘制图表
        myChart.setOption({
          title:{ text:'最近七天用户访问趋势'},
          xAxis:{
            type: 'category',
          data: ['2021-11-1', '2021-11-2', '2021-11-3', '2021--11-4', '2021-11-5', '2021-11-6','2021-11-7']

            },
          yAxis:{},
          series:[{
              name:'访问量',
              type:'line',
                data: [0, 1700, 1400, 1200, 300, 0,300]

          }]
              
        })
    }
  } ,
  
  data() {
    return {
      AdminMessage: {
        img: "../../assets/img/head.jpeg",
        time: "2019-09-11",
        space: "上海",
        name: "许嵩",
      },
      table:[
          {
            data:'2016-05-03',
            name:'隐姓埋名1',
            content:'啦啦啦,今天继续做项目',
            status:false
          },
           {
            data:'2016-05-23',
            name:'隐姓埋名2',
            content:'啦啦啦,今天继续做项目',
            status:false
          },
           {
            data:'2016-05-13',
            name:'隐姓埋名3',
            content:'啦啦啦,今天继续做项目',
              status:true
          },
           {
            data:'2016-05-01',
            name:'隐姓埋名4',
            content:'啦啦啦,今天继续做项目',
              status:true
          }, {
            data:'2016-05-02',
            name:'隐姓埋名5',
            content:'啦啦啦,今天继续做项目',
              status:false
          },
          {
            data:'2016-05-02',
            name:'隐姓埋名5',
            content:'啦啦啦,今天继续做项目',
              status:false
          },
          {
            data:'2016-05-02',
            name:'隐姓埋名5',
            content:'啦啦啦,今天继续做项目',
              status:false
          },
      ]
    };
  },
  computed: {
    message() {
      let c = JSON.parse(localStorage.getItem("message"));
      return c ? c : this.AdminMessage;
    },
  
  },
   
  mounted() {
    this.drawLine1()
    this.drawLine2()
  },
};

</script>

<style scoped>
#mychart1,#mychart2{
    width: 400px;
    height: 400px;
    display: inline-block;
    margin-top: 20px;

}
#mychart1 canvas,#mychart2 canvas{
  width: 100%;
  height: 100%;
}

.outline{
    text-decoration: line-through;
    color: rgba(174, 175, 182, 0.644);
}
.system_number div:last-child{
    color: rgba(155, 152, 152, 0.842);
    font-size: 15px;
}
.system_number{
        text-align: center;
}
.system_number>div{
        margin-top: 5px;
}
.admin,.system,.number{
    height: 100px;
    position: relative;
    font-family: 'iconfont';
    
}


.admin::before{
    content: '\e615';
    font-size: 60px;
}
.system::before{
    content: '\e657';
    font-size: 40px;
}
.number::before{
    content: '\e6df';
    font-size: 50px;
}
.admin::before,.system::before,.number::before{
     color: #fff;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        }
.admin {
    background-color: rgb(119, 0, 255);
}
.admin_color{
    color: rgb(119, 0, 255);
}
.admin_color,.system_color,.number_color{
    font-size: 25px;
    font-weight: 600;
}
.system {
    background-color: rgba(0, 255, 136, 0.61);
}
.system_color{
    color: rgba(0, 255, 136, 0.61);
}
.number {
    background-color: rgb(0, 225, 255);
}
.number_color{
    color: rgb(0, 225, 255);
}
.no-padding >>> .el-card__body{
    padding: 0;
}
.no-padding  >>>.el-card{
        width: 230px;
}
.system-head {
  display: flex;
  align-items: center;
}
.system-head  div:nth-child(1) {
  flex: 3.5;
}
.system-head  div:nth-child(2) {
  flex: 5;
}
.card-2 {
  margin-top: 20px;
}
.el-progress {
  margin-left: 10px;
}
.language_body {
  display: flex;
  flex-wrap: wrap;
}
.html {
  margin-left: 26px;
}
.language_body > span {
  margin: 10px 0 10px 5px;
  width: 200px;
  flex: 1;
  display: flex;
  align-items: center;
}
.head {
  display: flex;
  align-items: center;
}
.body {
  height: 80px;
  margin-top: 20px;
  border-top: 2px solid #ccc;
  padding-top: 20px;
}

.body > div {
  margin-bottom: 10px;
}
.body > div > span {
  margin-right: 20px;
}

img {
  width: 130px;
  border-radius: 50%;
}
.message {
  display: inline-block;
  margin-left: 50px;
  flex: 1;
}
.message div:last-child {
  margin-top: 10px;
}
.message div:first-child {
  font-size: 25px;
  font-weight: 700;
}
.font_color {
  color: #999;
}
  .schart {
        width: 100%;
        height: 300px;
    }
</style>